<template>
  <div class="huge-demo">
    <!-- <router-link :to="'/demo/hugeTree1'">hugeTree1</router-link>
    <button @click="nav">hugeTree1</button> -->
    <div class="btn-bar">
      huge-tree<br />
      点击按钮，展示tree<br />
      <button @click="btnClick('tree-500')">500条</button>
      <button @click="btnClick('tree-10000')">1w 条</button>
      <button @click="btnClick('tree-20000')">2w 条</button>
      <button @click="btnClick('tree-30000-multi-disabled')">3w 条(含有大量 disabled)</button>
      <button @click="btnClick('tree-50000')">5w 条</button>
      <button @click="btnClick('tree-100000')">10w 条</button>
      <button @click="btnClick('tree-200000')">20w 条</button><br />
      <button @click="onReload">刷新</button>
      <button @click="invokeRef('showCheckedOnly')">
        showCheckedOnly
      </button>
      <button @click="invokeRef('restore')">
        restore
      </button>
      <button @click="invokeRef('clear')">clear</button>
    </div>
    <div style="border: solid 1px #eee">
      过滤部分
      <button @click="tabChange(0)">0</button>
      <button @click="tabChange(1)">1</button>
      <button @click="tabChange(2)">2</button>
    </div>

    <div class="tree-wrap" v-show="isShowDialog">
      <huge-tree
        class="huge-tree"
        ref="huge-tree"
        has-input
        :item-height="32"
        checked-action="dblclick"
        :expand-keys="expandKeys"
        :expand-rotate="90"
        expand-level="all"
        :checkbox-options="{preCheckbox: true, checkBoxSize: '16px', showCheckbox: true, showCheckboxByKeys: ['online']}"
        item-class="test-item-class"
        :options="options"
        :count-options="countOptions"
        :is-loading="isLoading"
        :default-checked-keys="checkedKeys"
        :check-strictly="false"
        :extend-filter="extendFilter"
        @onChecked="onChange"
        @onClickLabel="onClickLabel"
        @onClickCheckbox="onClickCheckbox"
        @onClickItem="clickItem"
      >
       <template #expandIcon>
         <div class="expand-icon" :style="`background-image: url('${expandIcon}')`"></div>
       </template>
        <template #default="{item}">
          {{item.deptName}}({{item.isVehicle}})
        </template>
      </huge-tree>
    </div>
  </div>
</template>

<script>
import HugeTree from '../index.vue';

import tree from '../../../mock/test.json'
import expandIcon from '../../../assets/test.svg'
import {depts} from "../../../mock/testData";
export default {
  components: {
    HugeTree,
    // ReadMe,
  },
  props: {},
  data() {
    return {
      expandIcon,
      keyword: '',
      checkedKeys: [],
      isLoading: true,
      isShowDialog: false,
      expandKeys: [],
      options: {
        parentIdKey: 'pid',
        labelKey: 'deptName',
        labelExtendKey: 'extendLabel',
        disabledKey: 'disabledFlag',
        extendCountKey: 'disabledFlag',
        countKey: 'isVehicle'
      },
      countOptions: {
        showCount: true,
      },
      extendFilter: [{online: true}]
    };
  },

  computed: {},

  mounted() {
    this.btnClick('tree-500');
  },

  beforeDestroy() {},

  methods: {
    tabChange(e) {
      switch (e) {
        case 0:
          this.extendFilter = null
          break
        case 1:
          this.extendFilter = [{ online2: true }]
          break
        case 2:
          this.extendFilter = [{ online: false }]
          break
        default:
          this.extendFilter = null
          break
      }
    },
    async btnClick() {
      this.isShowDialog = true;
      await this.$nextTick()
      // this.expandKeys = [];
      this.$refs['huge-tree'].setData(depts);
      // this.isLoading = false;
    },
    onChange({ checkedKeys, checkedNodes }) {
      console.log('onChange', checkedKeys, checkedNodes);
    },
    onClickLabel(node) {
        if (node.checked) {
          console.log("这里")
          this.$refs['huge-tree'].setCheckedKeys([node.id])
        } else {
          console.log("哪里")
          this.$refs['huge-tree'].setCheckedKeys([])
        }
    },
    clickItem(node) {
      this.$refs['huge-tree'].setCheckedKeys([node.id])
      console.log("点击1111", node.id)
    },
    onClickCheckbox(node) {
      // console.log("xxxxx")
      // if (node.checked) {
      //   console.log("这里")
      //   this.$refs['huge-tree'].setCheckedKeys([node.id])
      // } else {
      //   console.log("哪里")
      //   this.$refs['huge-tree'].setCheckedKeys([])
      // }

      const a = JSON.parse(JSON.stringify(depts))
      this.$refs['huge-tree'].setData(a, false)
    },
    onReload() {
      window.location.reload();
    },
    invokeRef(name) {
      this.$refs['huge-tree'][name]();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .test-item-class {
  height: 32px;
  line-height: 32px;
}
.huge-demo {
  text-align: left;
  .btn-bar {
    padding: 20px;
    button {
      cursor: pointer;
      padding: 5px 10px;
      color: #ffffff;
      background-color: #409eff;
      border-radius: 4px;
      &:hover {
        background-color: #228af1;
      }
    }
  }
  .tree-wrap {
    border: solid 1px #333333;
    height: 60vh;
    width: 400px;
    .pre-select {
      cursor: pointer;
      padding: 5px 10px;
    }
  }
}
  .expand-icon {
    width: 8px;
    height: 8px;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
<style lang="scss">

</style>
